<template>
    <div class="content avatar">
        <van-uploader
            v-model="fileList"
            :max-count="1"
            :after-read="afterRead" />
        <div>
          <button class="save" @click = "onSaveBtn()">保存</button>
        </div>
        <vue-cropper
            v-if="show"
            class="cropper-content"
            ref="cropper"
            :img="fileList[0].content"
            :outputSize="0.8"
            outputType="jpeg"
            :info="true"
            :full="false"
            :canMove="false"
            :fixed="true"
            :fixedBox="false"
            :origin="false"
            :canMoveBox="true"
            :autoCrop="true"
            :autoCropWidth="300"
            :autoCropHeight="300"
            :centerBox="false"
            :high="true"
            mode="100% auto"
          >
        </vue-cropper>
        <div
            class="cropper-btn-content"
            v-if="show"
        >
          <span class="left" @click="cancelCropper">
              取消
          </span>
          <span class="right" @click="sureCropper">
              确认
          </span>
        </div>
    </div>
</template>
<script>
    import { Toast } from 'vant'
    import { settingAvatar } from "@/api/setting";
    import Vue from 'vue'
    import { Uploader } from 'vant';
    import VueCropper from 'vue-cropper'
    
    Vue.use(Uploader)
    Vue.use(VueCropper)
    export default {
        name: 'test',
        data () {
            return {
                fileList: [],
                show: false,
                blobFile: ''
            }
        },

        methods: {
            afterRead(e) {
                this.show = true
            },
            cancelCropper() {
                this.fileList = []
                this.show = false
            },
            sureCropper() {
                const that = this
                this.$refs.cropper.getCropData((data) => {
                  
                  that.fileList = [{content: data}]
                })

                this.$refs.cropper.getCropBlob((data) => {
                    
                    this.blobFile = data
                })
                that.show = false
            },
            onSaveBtn() {
                if (this.blobFile === '') {
                    Toast.fail({message:'请先选择文件', duration: 1000});
                    return;
                }
                const toast = Toast.loading({
                  duration: 0,
                  message: '头像上传中...',
                });
                let formData = new FormData()
                formData.append('file', this.blobFile)
                settingAvatar(formData).then(res => {
                    toast.clear()
                    if (res.code === 20000) {
                        Toast.success({message: "设置成功", duration: 2000});
                        this.$router.go(-1);
                    } else {
                        Toast.fail({message: res.info, duration: 2000});
                    }
                }).catch(e=>{
                    toast.clear()
                    Toast.fail({message: '网络异常', duration: 2000});
                })
            }
        },

        activated() {
            this.blobFile = ''
            this.fileList = [{content: this.$store.state.userInfo.avatar, isImage: true}]
        },

    }
</script>
<style lang="stylus">
    .content.avatar
        width 100% 
        height 100vh 
        background: #f5f5f5
        text-align: center
        padding-top: 80px
        .save
            width: 200px
            height: .9rem
            line-height: .9rem
            overflow: hidden
            border-radius: 8px
            border: 1px solid #d64532
            background: #d64532
            margin: 60px auto
            color: #fff
        .van-uploader__upload
            width: 150px!important
            height: 150px!important
            border: 1px solid #ddd
        .van-uploader__preview-image
            width: 150px!important
            height: 150px!important
        .cropper-content
            position: fixed!important
            top: 0
        .cropper-btn-content
            z-index: 99999
            position: fixed
            bottom: 0
            span 
                font-size: .33rem;
                font-weight: bold;
                position: fixed;
                bottom: 15px;
            .left
                left: 15px;
                color: white;
            .right
                color: #d64532;
                right: 15px;
</style>
